<template>
  <div style="min-height: 100vh; background-color: #f8f9fa; font-family: 'Segoe UI', sans-serif">
    <!-- 顶部导航栏 -->
    <EpHeader />

    <!-- 主内容区域 -->
    <main style="max-width: 1200px; margin: 32px auto; padding: 0 24px">
      <!-- 筛选栏 -->
      <div
        style="
          background-color: white;
          padding: 16px 24px;
          border-radius: 12px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          margin-bottom: 24px;
        "
      >
        <EpSubject />

        <!-- 课程列表 -->
        <div
          style="
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
          "
        >
          <!-- 课程卡片 -->
          <EpCourse />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import EpHeader from '@/components/EpHeader.vue'
import EpCourse from '@/components/EpCourse.vue'
import EpSubject from '@/components/EpSubject.vue'
</script>
